<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>优惠券管理</title>
    <script>

        var couponType = {
            1 : "折扣券",
            2 : "满减券"
        }

        $(document).ready(function() {
            var page = {
                pageNum : 1,
                pageSize : 10,
                pages : 0,
                total : 0
            };

            function query(increment) {
                if (increment < 0 && page.pageNum == 1) {
                    return;
                }
                if (increment > 0 && page.pageNum >= page.pages) {
                    return;
                }

                page.pageNum += increment;

                $.post("/admin/coupon/tplList", {
                    pageNum: page.pageNum,
                    pageSize: page.pageSize
                }, function (data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "";
                        page.pages = data.pages;
                        page.total = data.total;
                        data.data.forEach(function (t) {
                            html += "<tr>";
                            html += "<td>" + t.id + "</td>";
                            html += "<td>" + couponType[t.couponType] + "</td>";
                            html += "<td>" + (t.subAmt != null ? ((t.minLimit != null ? ("满" + t.minLimit/100 + "减") : "") + t.subAmt/100 + "元") : (t.discount*10 + "折")) + "</td>";
                            html += "<td>" + t.genNum + "</td>";
                            html += "<td>" + t.createTime + "</td>";
                            html += "<td><button type='button' class='btn btn-xs'>查看</button></td>";
                            html += "</tr>";
                        })
                        $(".table > tbody").html(html);
                        if (page.pageNum == 1) {
                            $("#liPrePage").addClass("disabled");
                        } else {
                            $("#liPrePage").removeClass("disabled")
                        }
                        if (page.pages > 1 && page.pageNum < page.pages) {
                            $("#liNextPage").removeClass("disabled");
                        } else {
                            $("#liNextPage").addClass("disabled");
                        }
                    }
                });
            }

            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });

            $("#btAdd").click(function () {
                $("#discount").val("");
                $("#minLimit").val("");
                $("#subAmt").val("");
                $("#genNum").val("");
            });
            $("#btSaveCoupon").click(function () {
                
                $.post("/admin/coupon/genCoupon", {
                    couponType : $("#couponType").val().trim(),
                    discount : $("#discount").val().trim(),
                    minLimit : $("#minLimit").val().trim(),
                    subAmt : $("#subAmt").val().trim(),
                    genNum : $("#genNum").val().trim()
                }, function (data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        query(0);
                        $('#couponAddModal').modal('hide');
                    }
                });

            });
            
            $("#couponType").change(function () {
                if (this.value == 1) {
                    $("#discount").parent().show();
                    $("#minLimit").parent().hide();
                    $("#subAmt").parent().hide();

                    $("#subAmt").val("");
                    $("#minLimit").val("");

                } else if (this.value == 2) {
                    $("#discount").parent().hide();
                    $("#minLimit").parent().show();
                    $("#subAmt").parent().show();

                    $("#discount").val("");
                } else {

                }
            });

            query(0);
        });


    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/coupon/}">优惠券管理</a></li>
</ol>
<button type="button" class="btn btn-default" id="btAdd" style="margin-bottom: 10px" data-toggle='modal' data-target='#couponAddModal'>添加</button>
<table class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>优惠种类</th>
        <th>金额</th>
        <th>数量</th>
        <th>添加时间</th>
        <th>使用记录</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>

<div class="modal fade" tabindex="-1" role="dialog" id="couponAddModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="couponType">优惠券种类</label>
                        <select id="couponType" class="form-control">
                            <option value="1">折扣券</option>
                            <option value="2">满减券</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="discount">折扣</label>
                        <input type="text" class="form-control" id="discount" >
                    </div>
                    <div class="form-group" hidden="hidden">
                        <label for="minLimit">满</label>
                        <input type="text" class="form-control" id="minLimit" >
                    </div>
                    <div class="form-group" hidden="hidden">
                        <label for="subAmt">减</label>
                        <input type="text" class="form-control" id="subAmt" >
                    </div>
                    <div class="form-group">
                        <label for="genNum">生成数量</label>
                        <input type="text" class="form-control" id="genNum">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btSaveCoupon">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>